<template>
  <!-- 教务管理-班级订单 -->
  <div class="classOrderManage">
    <div class="content-order">
      <div class="box-topInfo">
        <span>{{className}}</span>
        <span style="font-size:0.18rem;">已约 <span>{{classInfoObj.feiboSyllabusOrderNum}}</span> 节/共 <span>{{classInfoObj.feiboSyllabusNum||(classInfoObj.syllabusEndNum-classInfoObj.syllabusStartNum+1)}}</span> 节</span>
        <el-button class="resetElement"
         v-if="classInfoObj.feiboSyllabusOrderNum!=(classInfoObj.syllabusEndNum-classInfoObj.syllabusStartNum+1)"
         style="width:1.6rem;" type="primary" @click="showSelectTeacher">约名师</el-button>
         <div v-else></div>
      </div>
      <!-- <div class="box-courseList" v-if="false">
        <div class="courseObj" v-for="(row,index) in courseList" :key="index">
          <div class="box-orderNo">
            <div class="leftcloumn" style="margin-left: 0.4rem;">
              <span>订单号：{{row.orderNo}}</span>
              <span style="margin-left:1rem;">下单时间：{{row.createTime}}</span>
            </div>
            <el-button type="text" :disabled="row.cancleFlag==1" style="width:1.6rem;" @click="cancelOrder(row)">取消订单</el-button>
          </div>
          <div class="courseinfo">
            <div class="cloumn namebox">
              <span class="className">{{row.courseName}}</span>
              <span class="teacherType">老师类型：{{tool.getDictNameByValue(row.foreignTeacherType,'foreign_teacher_type')}}</span>
            </div>
            <div class="cloumn">
              <div class="clickItem" @click="showCourseTable(row)">
                <span>已约<span style="color:#3885f8;margin:0 0.05rem;">{{row.buySyllabusNum}}</span>节/共{{row.syllabusNum}}节</span>
                <i :class="row.arrowClass"></i>
              </div>
            </div>
            <div class="cloumn">
              <span>共支付</span>
              <span style="color:#ffbb1f;font-size:0.22rem;">￥{{row.orderMoney}}</span>
            </div>
            <div class="cloumn btnbox">
              <el-button style="width:1.6rem;" type="text" @click="showSelectTeacher">约名师</el-button>
            </div>
          </div>
          <el-collapse-transition>
            <div class="courseTable" v-if="row.courseTableVisible">
              <el-table
                :data="row.tableData"
                stripe
                style="width: 100%">
                <el-table-column
                  prop="makeTime"
                  align="center"
                  label="预约时间">
                </el-table-column>
                <el-table-column
                  prop="orderNumber"
                  align="center"
                  label="约课数(节)">
                </el-table-column>
                <el-table-column
                  prop="payMoney"
                  align="center"
                  label="支付金额">
                </el-table-column>
                <el-table-column
                  label="操作"
                  align="center">
                  <template slot-scope="scope">
                    <el-button type="primary" @click="querySyllabusList(scope.row)">查看排课</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-collapse-transition>
        </div>
      </div> -->
      <div class="box-courseList">
        <el-table
          :data="courseList"
          stripe
          style="width: 100%;font-size:0.16rem;">
          <el-table-column
          width="355"
          prop="orderNo"
          align="center"
          label="订单号">
          </el-table-column>
          <el-table-column
          prop="createTime"
          align="center"
          label="下单时间">
          </el-table-column>
          <el-table-column
          prop="buySyllabusNum"
          align="center"
          label="已约课节">
          </el-table-column>
          <el-table-column
          prop="foreignTeacherTypeName"
          align="center"
          label="老师类型">
          </el-table-column>
          <el-table-column
          prop="orderMoney"
          align="center"
          label="实际支付">
          </el-table-column>
          <el-table-column
          prop="orderStatu"
          align="center"
          label="订单状态">
          </el-table-column>
          <el-table-column
            label="操作"
            prop="operation"
            align="center">
            <template slot-scope="scope">
              <el-button style="font-size:0.16rem;" 
                v-if="scope.row.cancleFlag!=1&&scope.row.orderStatu!='交易成功'"
                @click="cancelOrder(scope.row)" type="text">取消订单</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 约名师-取消订单 -->
    <el-dialog class="orderForeignCancelOrderPopup" :modal="false" :title="'取消订单'" :visible.sync="orderForeignCancelOrderPopupVisible">
      <orderForeignCancelOrder ref="orderForeignCancelOrder" :orderForeignCancelOrder="null" @cancel="()=>{this.orderForeignCancelOrderPopupVisible=false;update();}"></orderForeignCancelOrder>
    </el-dialog>
  </div>
</template>

<script>
import orderForeignCancelOrder from './orderForeign_cancelOrder';
let vm;
export default {
  components:{orderForeignCancelOrder},
  props: ["classOrderManage"],
  data() {
    return {
      orderForeignCancelOrderPopupVisible:false,
      className:'',
      courseList:[],
      classInfoObj:{}
    };
  },
  methods: {
    /**初始化数据
     * @param 班级信息 classId classOrTrialClass
     */
    initBydata(data) {
      if (!data) return;
      this.className=data.className||'';
      api.getfeiboSyllabusTeacherOrder({classId:data.classId,classOrTrialClass:data.classOrTrialClass}).then(function(d){
        // console.log(d);
        if(d.result=='操作成功'){
          vm.courseList=d.list;
          vm.courseList.forEach(row=>{
            row['orderStatu']=vm.getOrderSatatu(row);
            row['foreignTeacherTypeName']=tool.getDictNameByValue(row.foreignTeacherType,'foreign_teacher_type');
          });
        }
      });
      
      //正常班级
      if(data.classOrTrialClass===1){
        api.getClassById({classId:data.classId}).then(function(d){
          if(d.result=='操作成功'){
            vm.classInfoObj=d.class;
          }
        });
      }
      //试听班级
      else if(data.classOrTrialClass===2){
        api.auditionInfo({classId:data.classId}).then(function(d){
          if(d.result=='操作成功'){
            vm.classInfoObj=d.data;
          }
        });
      }
    },
    /**刷新数据 */
    update() {
      let data=this.classInfoObj;
      if (!data) return;
      this.className=data.className||'';
      api.getfeiboSyllabusTeacherOrder({classId:data.classId,classOrTrialClass:data.classOrTrialClass}).then(function(d){
        // console.log(d);
        if(d.result=='操作成功'){
          vm.courseList=d.list;
          vm.courseList.forEach(row=>{
            row['orderStatu']=vm.getOrderSatatu(row);
            row['foreignTeacherTypeName']=tool.getDictNameByValue(row.foreignTeacherType,'foreign_teacher_type');
          });
        }
      });
      //正常班级
      if(data.classOrTrialClass===1){
        api.getClassById({classId:data.classId}).then(function(d){
          if(d.result=='操作成功'){
            vm.classInfoObj=d.class;
          }
        });
      }
      //试听班级
      else if(data.classOrTrialClass===2){
        api.auditionInfo({classId:data.classId}).then(function(d){
          if(d.result=='操作成功'){
            vm.classInfoObj=d.data;
          }
        });
      }
    },
    /**获取订单状态 */
    getOrderSatatu(data){
      if(!data)return '';
      let result='预约成功';
      if(data.cancleFlag==1){
        result='已退费';
      }
      else{
        let issucss=true;
        data.acOrderItem.forEach(ele=>{
          let time=ele.makeTime+':00';
          time=time.replace(/-/g,'/');
          let start=new Date(time);
          let bt=(new Date()).getTime()-start.getTime();
          if(bt<0){
            issucss=false;
          }
        });
        if(issucss)result='交易成功';
      }
      return result;
    },
    showCourseTable(row){
      row.courseTableVisible=!row.courseTableVisible;
      if(row.courseTableVisible){
        row.arrowClass='el-icon-arrow-down';
      }
      else{
        row.arrowClass='el-icon-arrow-right';
      } 
    },
    /**排课列表 */
    querySyllabusList(row){
      this.$emit('showOrderForeignSyllabuslist',{teacher:{visible:false},syllabus:{visible:true,data:this.classInfoObj},classorder:{visible:true}});
    },
    /**取消订单 */
    cancelOrder(data){
      this.orderForeignCancelOrderPopupVisible=true;
      this.$nextTick(()=>{
        data.classOrTrialClass=vm.classInfoObj.classOrTrialClass;
        this.$refs.orderForeignCancelOrder.initBydata(data);
      });
    },
    /**跳转至 约名师 */
    showSelectTeacher(){
      let classInfoObj=this.classInfoObj;
      if (!classInfoObj) return;
      //正常班级
      if(classInfoObj.classOrTrialClass===1){
        let param={classId:classInfoObj.classId,courseId:classInfoObj.coursePackageId,unappointedSyllabus:1};				
        api.courseschedulinglist(param).then(function(data){//排课列表
            if(data.listSyllabus.length>0){//已有排课

              let curTime = tool.DateToString(new Date(),"yyyy-MM-dd HH:mm");
              let listSyllabus =[];
              for(let i=0;i<data.listSyllabus.length;i++){
                if(curTime<=data.listSyllabus[i].startTime){
                  listSyllabus.push(data.listSyllabus[i]);		    	 	 		
                }
              }  
              if(listSyllabus.length==0){
                vm.$message({
                  type: 'warning',
                  message: '所有课节已超时！'
                });
              }
              else
                vm.$emit('showOrderForeignSyllabuslist',{teacher:{visible:true,
                  data:{classObj:classInfoObj,courseObj:listSyllabus}},
                  syllabus:{visible:false},
                  classorder:{visible:false}}
                );
            }else{//未排课		    		 
              vm.$message({
                type: 'warning',
                message: '请先排课或取消已约的名师排课！'
              });
            }
        });
      }
      //试听班级
      else if(classInfoObj.classOrTrialClass===2){
        var param = { classId : classInfoObj.classId, unappointedSyllabus : 1 };
        api.auditionSyllabus(param).then(function(data) {
          if(data.list.length>0){
            let now = tool.DateToString(new Date(),"yyyy-MM-dd HH:mm");
            let list = [];
            
            data.list.forEach(function(item) {
              if(now <= item.startTime){
                  list.push(item);		    	 	 		
                }
            });
            if(list.length == 0) {
              vm.$message({
                type: 'warning',
                message: '所有课节已超时！'
              });
            }
            else{
							vm.$emit('showOrderForeignSyllabuslist',{teacher:{visible:true,
                  data:{classObj:classInfoObj,courseObj:list}},
                  syllabus:{visible:false},
                  classorder:{visible:false}}
              );
            }
          }
          else{
            vm.$message({
              type: 'warning',
              message: '请先排课或取消已约的名师排课！'
            });
          }
        });
      }
      
    }
  },
  mounted() {
  },
  computed: {},
  watch: {},
  created: function() {vm=this;}
};
</script>

<style lang="scss">
.classOrderManage {
  .content-order {
    padding: 0 0.04rem 0.2rem 0.04rem;
    font-size: 0.16rem;
    background: #fff;
    border: 0.01rem solid #dcdfe6;
    border-radius: 0.1rem;
    -webkit-box-shadow: 0 0.02rem 0.38rem 0 #3885f81f, 0 0 0.06rem 0 #3885f81f;
    box-shadow: 0 0.02rem 0.38rem 0 #3885f81f, 0 0 0.06rem 0 #3885f81f;
    .box-topInfo{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.15rem 0.3rem;
      height: 0.62rem;
      color: #333333;
      font-size: 0.22rem;
      border-bottom: 0.01rem solid #ebebeb;
      // background: #fff;
      // border: 0.01rem solid #dcdfe6;
      // border-radius: 0.1rem;
      // -webkit-box-shadow: 0 0.02rem 0.38rem 0 #3885f81f, 0 0 0.06rem 0 #3885f81f;
      // box-shadow: 0 0.02rem 0.38rem 0 #3885f81f, 0 0 0.06rem 0 #3885f81f;
    }
    .box-courseList{
      width: 100%;
      padding: 0.18rem 0.4rem;
      color: #666666;
      font-size: 0.18rem;
      .courseObj{
        width: 100%;
        // padding: 0.16rem;
        margin-bottom: 0.12rem;
        // background: #fff;
        // border: 0.01rem solid #dcdfe6;
        // border-radius: 0.1rem;
        // -webkit-box-shadow: 0 0.02rem 0.38rem 0 #3885f81f, 0 0 0.06rem 0 #3885f81f;
        // box-shadow: 0 0.02rem 0.38rem 0 #3885f81f, 0 0 0.06rem 0 #3885f81f;
        min-height: 0.9rem;
        border-bottom: 0.01rem solid #ebebeb;
        .box-orderNo{
          display: flex;
          justify-content: space-between;
          align-items: center;
          background-color: #f5f5fa;
          margin-bottom: 0.1rem;
        }
        .courseinfo{
          display: flex;
          margin-bottom: 0.12rem;
          .cloumn{
            width: 25%;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            .clickItem:hover{
              cursor: pointer;
              user-select: none;
            }
          }
          .cloumn.btnbox{
            justify-content: flex-end;
          }
          .namebox{
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            .className{
              margin-bottom: 0.12rem;
              font-size: 0.22rem;
              color: #333333;
              font-weight: bold;
            }
            .teacherType{
              font-size: 0.16rem;
              color: #666666;
            }
          }
        }
      }
    }
  }
}
// 弹窗容器样式
.classOrderManagePopup {
  // top: 0.81rem;
  // left: 2.1rem;
  background-color: rgba(0, 0, 0, 0.3);
  .el-dialog {
    // width: 100%;
    // min-height: 100%;
    // margin: 0 !important;
    .el-dialog__header {
      
    }
    .el-dialog__title {
      font-size: 0.25rem;
      font-weight: bold;
      color: #333333;
    }
    .el-dialog__headerbtn {
      font-size: 0.25rem !important;
    }
  }
  .el-dialog::-webkit-scrollbar {
    width: 0.1rem;
    height: 0.1rem;
  }
  .el-dialog::-webkit-scrollbar-thumb {
    border-radius: 0.5rem;
    background: #bbbbbb;
  }
  .el-dialog::-webkit-scrollbar-track {
    background: #f2f6fc;
  }
}
// 弹窗容器滚动条
.classOrderManagePopup::-webkit-scrollbar {
  width: 0.1rem;
  height: 0.1rem;
}
.classOrderManagePopup::-webkit-scrollbar-thumb {
  border-radius: 0.5rem;
  background: #bbbbbb;
}
.classOrderManagePopup::-webkit-scrollbar-track {
  background: #f2f6fc;
}

</style>